<!-- 
    主要用户身份证明的头像上传组件
    
    用法：<f7-idcard-upload imgId="workPic" imgSrc="/static/img/idcard1.png" :dataKey="loginId" type="avatar" replaceImg="true" uploadTitle="上传工作证照" @uploaded="workPicUploaded"></f7-idcard-upload>
    
    备注：imgId，用于将原来图片替换成新上传的图片，
            imgSrc，原来的图片
            dataKey，一个唯一标识的值，比如userId，loginId
            type，参考后台的AttachmentType枚举
            replaceImg，是否用新上传的图片替换原来的图片，和imgId，imgSrc相关
            uploadTitle，标题提示
            @uploaded，uploaded事件，提供一个attachmentId参数
 -->
<template>
  <f7-row class="upload-row">
    <f7-col style="height: 100%;">
      <img
        :id="imgId"
        :src="imgSrc"
        class="upload-img"
      />
    </f7-col>
    <f7-col>
    </f7-col>
    <f7-col style="height: 100%;padding: 25px 5px">
      <div
        @click="uploadImg"
        style="text-align: center;"
      >
        <f7-icon
          f7="add"
          style="font-size: 35px;"
        ></f7-icon>
      </div>
      <div style="text-align: center;">{{ uploadTitle }}</div>
    </f7-col>
  </f7-row>
</template>
<script>
import Config from "../config";
import Upload from "../framework/upload";
import User from "../framework/user";

export default {
  props: {
    imgId: {
      type: String
    },
    imgSrc: {
      type: String
    },
    replaceImg: {
      type: Boolean,
      default: true
    },
    uploadTitle: {
      type: String,
      default: "上传相关证件"
    },
    dataKey: {
      type: String
    },
    type: {
      type: String,
      default: "avatar"
    },
    dataType: {
      type: String
    }
  },
  data() {
    return {};
  },
  methods: {
    uploadImg() {
      let self = this;
      // 选择
      User.selectImage(self.uploadTitle, function(path, needDelete) {
        // 上传
        Upload.upload(
          path,
          self.dataKey,
          self.type,
          function(result) {
            let attachmentId = "";
            if (result && result.fileId) {
              attachmentId = result.fileId;
            }
            if (attachmentId == "") {
              self.$f7.dialog.toast("无法读取图片路径");
              return;
            }

            Upload.idDownload(
              Config.api.localAvatarDir,
              attachmentId,
              false,
              function(task) {
                // 删除拍摄的照片
                if (needDelete) {
                  // console.log("删除拍摄的照片");
                  Upload.deleteTmpFile(path);
                }
                // 显示图片
                window.plus.io.resolveLocalFileSystemURL(
                  task.filename,
                  function(entry) {
                    if (self.replaceImg) {
                      self.$f7
                        .$("#" + self.imgId)
                        .attr("src", entry.toRemoteURL());
                    }
                    self.$emit("uploaded", attachmentId);
                  },
                  function(e) {
                    console.log(e.message);
                  }
                );
              }
            );
          },
          self.dataType
        );
      });
    }
  }
};
</script>
<style scoped>
.upload-row {
  height: 100px;
  border: 2px dashed #adaaaa;
  margin: 5px;
  background: #efefef94;
}
.upload-img {
  height: 80px;
  padding: 10px 30px;
}
</style>